<template>
  <div>
    <el-table
        :data="tableData"
        border
        :row-class-name="tableRowClassName"
        style="width: 1400px;height: 635px">


      <el-table-column
          fixed="left"
          prop="ids"
          label="多选"
          width="50">
        <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
        <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
          <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
        </el-checkbox-group>
      </el-table-column>
      <el-table-column
          fixed="left"
          prop="operId"
          label="ID"
          width="50">
      </el-table-column>
      <el-table-column
          prop="title"
          label="标题"
          width="135">
      </el-table-column>
      <el-table-column
          prop="businessType"
          label="业务类型"
          width="80">
      </el-table-column>
<!--      <el-table-column-->
<!--          prop="method"-->
<!--          label="方法名称"-->
<!--          width="120">-->
<!--      </el-table-column>-->
      <el-table-column
          prop="requestMethod"
          label="请求方法"
          width="80">
      </el-table-column>
      <el-table-column
          prop="operType"
          label="操作类型"
          width="80">
      </el-table-column>
      <el-table-column
          prop="deptName"
          label="部门名称"
          width="100%">
      </el-table-column>
      <el-table-column
          prop="operName"
          label="操作人员"
          width="100%">
      </el-table-column>
      <el-table-column
          prop="operUrl"
          label="操作URL"
          width="140">
      </el-table-column>
      <el-table-column
          prop="operIp"
          label="主机地址"
          width="80">
      </el-table-column>
      <el-table-column
          prop="operLocation"
          label="操作地点"
          width="100%">
      </el-table-column>
<!--      <el-table-column
          prop="operParam"
          label="操作参数"
          width="120">
      </el-table-column>-->


      <el-table-column
          prop="jsonResult"
          label="返回参数"
          width="100%">
      </el-table-column>
      <el-table-column
          prop="status"
          label="操作状态"
          width="100%">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status == 0">正常</el-tag>

          <el-tag style="color: red"  v-if="scope.row.status == 1">异常</el-tag>
        </template>
      </el-table-column>
      <el-table-column
          prop="errorMsg"
          label="错误信息"
          width="100%">
      </el-table-column>

      <el-table-column
          fixed="right"
          label="操作"
          width="100">
        <template slot-scope="scope">
          <el-button @click="del(scope.row.logId)" type="text" size="small">删除</el-button>
          <el-button type="text" size="small" @click="show(scope.row)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>



    <el-dialog title="操作日志详情" :visible.sync="dialogTableVisible">
      <el-form :model="form" label-width="100px" >

        <el-row>
          <el-col :span="12" style="border-style: dashed">
            <el-form-item label="操作url:" >
              {{form.operUrl}}
<!--              <el-input v-model="form.operUrl"></el-input>-->
            </el-form-item>
          </el-col>
          <el-col :span="12" style="border-style: dashed">
            <el-form-item label="操作IP:" >
              {{form.operIp}}
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="登录信息:" style="border-style: dashed">
              {{form.operName}} / {{form.operIp}} / {{form.operLocation}}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="操作状态:" style="border-style: dashed">
              {{form.status == 0 ? '正常' : '异常'}}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col  style="border-style: dashed">
            <el-form-item label="操作参数:"   >
              {{form.operParam}}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="border-style: dashed">
          <el-col :span="50" >
            <el-form-item label="操作方法 :" >
              {{form.method}}
            </el-form-item>
          </el-col>
          <el-col span="50" >
            <el-form-item label="操作时间 :" >
              {{form.operTime}}
            </el-form-item>
          </el-col>
        </el-row>






        </el-form>

    </el-dialog>







    <div class="block">
      <el-pagination
          @current-change="goPage"
          :page-size="size"
          layout="total, prev, pager, next"
          :total="total">
      </el-pagination>
    </div>

  </div>
</template>

<script>
export default {
  name: "OperLogView",
  data(){
    return{
      tableData:[],
      size:10,
      total:0,
      current:0,
      dialogTableVisible:false,
      form:{},
      username:'',
      checkAll:false,
      isIndeterminate: false,
      checkedCities:[]
    }
  },
  created() {
    sessionStorage.setItem("username","zdh")
    this.init();
  },
  methods:{
    init(){
      this.username=sessionStorage.getItem("username");
      this.axios.post("/log/operLog/operList?size="+this.size+"&current="+this.current).then(res=>{
        // console.log(sessionStorage.getItem("username"))
        console.log(res.data)
        this.tableData=res.data.data.records;
        this.total=res.data.data.total;
      })
    },
    goPage(val){
      this.current=val;
      this.init();
    },
    del(logId){
      console.log(this.checked)
      this.axios.post("/log/operLog/delete?logId="+logId).then(res=>{
        if (res.data.code == 200 ){
          this.$message.success("删除成功");
          this.init();
        }else {
          this.$message.error("删除失败");
        }
      })
    },
    tableRowClassName({rowIndex}){
      if (rowIndex % 2 == 0) {
        return 'warning-row';
      }
    },
    show(row){
      console.log(row)
      this.dialogTableVisible=true;
      this.form=row
      console.log(this.form)
    },

    handleCheckAllChange(val) {
      this.checkedCities = val ? cityOptions : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.cities.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
    }



  }
}
</script>

<style>
.el-table .warning-row {
  background: oldlace;
}


</style>